<template>
  <div class="pd-20">
    <el-input v-model="param.name"
              placeholder="请输入筛查名称"
              class="w-200"
              @clear="handleQuery"
              clearable></el-input>
    <el-select v-model="param.healthRiskTypeName"
               @clear="handleQuery"
               @change="handleQuery"
               class="w-200"
               placeholder="请选择所属分类"
               clearable>
      <el-option v-for="item in healthRiskType"
                 :key="item.id"
                 :label="item.name"
                 :value="item.name">
      </el-option>
    </el-select>
    <el-select v-model="param.status"
               @clear="handleQuery"
               @change="handleQuery"
               placeholder="请选择状态"
               class="w-200"
               clearable>
      <el-option label="上架"
                 :value="1"></el-option>
      <el-option label="下架"
                 :value="0"></el-option>
    </el-select>
    <el-button @click="handle(1,0)"
               type="primary">查 询
    </el-button>
    <el-button @click="handle(2,0)"
               type="primary">新 增
    </el-button>


    <element-table class="mt-20"
                   v-loading="loading"
                   :columns="columns"
                   :data="tableData"
                   pager
                   :pageTotal="pageTotal"
                   :pageIndex="param.pageIndex"
                   :pageSize="param.pageSize"
                   @handleChangePage="handleChangePage">
      <template v-slot:option="{ row }">

        <el-button type="primary"
                   @click="handle(3,row)">编 辑
        </el-button>
        <el-button type="info"
                   @click="handle(4,row)">{{ row.status == 0 ? '上 架' : '下 架' }}
        </el-button>
        <el-button type="danger"
                   @click="handle(5,row)">删 除
        </el-button>
        <el-button type="warning"
                   @click="handle(6,row)">慢病签约服务费配置
        </el-button>
      </template>
      <template v-slot:status="{ row }">
        <el-tag :type=" row.status == 0 ? 'success' : 'danger'">{{ row.status == 1 ? '上架' : '下架' }}</el-tag>
      </template>
    </element-table>
    <add-dialog v-if="showdialog"
                :dialogData='dialogData'
                :visible.sync="showdialog"/>

    <healthconfig-dialog v-if="showConfigDialog"
                         :dataObj='dataObj'
                         :visible.sync="showConfigDialog"/>

    <target-dialog v-if="showTargetDialog"
                   :dataObj='dataObj'
                   :visible.sync="showTargetDialog"/>
  </div>
</template>

<script>
import addDialog from './dialog'
import elementTable from '@/base/ElementTable'
import healthConfigDialog from "./healthConfigDialog";
import targetDialog from "./targetDialog";

export default {
  data() {
    return {
      pageTotal: 0,
      loading: false,
      showdialog: false,
      showConfigDialog: false,
      showTargetDialog: false,
      dataObj: {},
      dialogData: {
        show: false,
        info: {},
        title: '新增'
      },
      healthRiskType: [],
      param: {
        type: 1,
        name: '',
        status: '',
        healthRiskTypeName: '',
        pageIndex: 1,
        pageSize: 20
      },
      columns: [
        {
          label: '筛查名称',
          prop: 'name',
          width: 300,
          align: 'center',
          showToolTip: true
        },
        {
          label: '所属分类',
          prop: 'healthRiskTypeName',
          align: 'center'
        },
        {
          label: '价格',
          prop: 'price',
          align: 'center',
          formatter: (row, cellValue) => {
            return row.price + '  元起'
          }
        },
        {
          label: '上线时间',
          prop: 'createTime',
          align: 'center',
          formatter: (row, cellValue) => {
            return this.commonFunction.timestampFormat(new Date(row.createTime), 'yyyy-MM-dd hh:mm:ss')
          }
        },
        {
          label: '状态',
          prop: 'status',
          align: 'center',
          isSlot: true
        },
        {
          label: '操作',
          prop: 'option',
          align: 'center',
          width: 440,
          isSlot: true
        }
      ],
      tableData: [],
    }
  },
  mounted() {
    this._getList();
    this.post(this.api.cooperationHospital.healthRiskTypegetPageList, {
      pageSize: 100,
      pageIndex: 0,
    }).then(res => {
      if (res.data.code === '200') {
        this.healthRiskType = res.data.object;
      }
    })

  },
  methods: {
    handleQuery() {
      this.param.pageIndex = 1
      this._getList()
    },
    _getList() {
      this.loading = true;
      this.post(this.api.cooperationHospital.healthCheckManagegetPageList, {
        ...this.param,
        pageIndex: this.param.pageIndex - 1
      }).then(res => {
        if (res.data.code === '200') {
          this.loading = false;
          this.tableData = res.data.object;
          this.pageTotal = res.data.totalNum;
        }
      })
    },
    // 分页
    handleChangePage(page) {
      this.param.pageIndex = page;
      this._getList();
    },
    handle(index, row) {
      switch (index) {
        case 1:
          this.param.pageIndex = 1;
          this._getList();
          break;
        case 2:
          // this.showdialog = true;
          // this.dialogData = {
          //   show: true,
          //   info: null,
          //   title: '新增'
          // }
          this.showTargetDialog = true;
          this.dataObj = null
          break;
        case 3:
          // this.showdialog = true;
          // this.dialogData = {
          //   show: true,
          //   info: row,
          //   title: '编辑'
          // }
          this.showTargetDialog = true;
          this.dataObj = row
          break;

        case 4:
          let state;
          row.status === 1 ? state = 0 : state = 1;
          this.$confirm(`您是否要${state === 1 ? '上架' : '下架'}该套餐？`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {

            this.post(this.api.cooperationHospital.healthCheckManageupdateStatus, {
              status: state,
              id: row.id
            }).then(res => {
              if (res.data.code === '200') {
                this.$message.success(`${state === 1 ? '上架' : '下架'}成功!`);
                this._getList()
              } else {
                this.$message.warning(res.data.message)
              }
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            })
          });
          break;
        case 5:
          this.$confirm('此操作将永久删除, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.post(this.api.cooperationHospital.healthCheckManagedel, {id: row.id}).then(res => {
              if (res.data.code === '200') {
                this.$message.success(res.data.message);
                this._getList();
              }
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          });
          break;
        case 6:
          //慢病签约服务费配置
          this.showConfigDialog = true
          this.dataObj = row
          break
      }
    }
  },
  components: {
    'add-dialog': addDialog,
    'element-table': elementTable,
    'healthconfig-dialog': healthConfigDialog,
    'target-dialog': targetDialog,
  }
}
</script>

<style>
</style>
